<template>
    <div class="repair-sort">
        <table class="info-table">
            <thead>
                <tr>
                    <th class="th1">名次</th>
                    <th class="th2">{{cname}}</th>
                    <th class="th3">数量</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,inx) in items" :key="inx" :class="`tr${ inx+1 }`">
                    <td class="td1">{{ inx+1 }}</td>
                    <td class="td2">{{ item.name }}</td>
                    <td class="td3">{{ item.count }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import { computed, ref, onMounted, reactive } from 'vue';
const props = defineProps({
    cname: {
        type: String,
        default: '名称',
    },
    items: {
        type: Array,
        default: [],
    } 
});
</script>
<style lang="less" scoped>
.repair-sort {
    .info-table {
        width: 100%;

        thead {
            th {
                height: 24px;
                font-size: 12px;
                color: #86909C;
                font-weight: normal;
            }

            .th1 {
                width: 55px;
            }

            .th2 {
                text-align: left;
            }

            .th3 {
                width: 60px;
                text-align: right;
            }
        }

        tbody {
            td {
                font-size: 14px;
                color: #1D2129;
                height: 35px;
            }

            .td1 {
                color: #4E5969;
                font-size: 16px;
                font-style: italic;
            }

            .td2 {
                text-align: left;
            }

            .td3 {
                text-align: right;
                color: #1D2129;
                font-weight: 600;
            }

            .tr1 {
                .td1 {
                    color: #F53F3F;
                }
            }

            .tr2 {
                .td1 {
                    color: #F77234;
                }
            }

            .tr3 {
                .td1 {
                    color: #00B42A;
                }
            }
        }
    }
}
</style>